/*!
 _________
|    ⚽️   |\
| ~~~~~~~ |_\
| radio |
| ~~~~~~~ |
| ~~~~~~~ |
|_________|
*/
@import './_prefix.less';
radio {
    position: relative;
    color: var(--green);
    &::before {
        font-family: '@{prefix}-icon';
        content: '\e759';
        position: absolute;
        color: var(--white) !important;
        top: 0%;
        right: auto;
        bottom: 0;
        left: 10rpx;
        font-size: 16rpx;
        height: 52rpx;
        line-height: 52rpx;
        width: 50%;
        text-align: center;
        pointer-events: none;
        transform: scale(0, 0);
        transition: all .3s ease-in-out 0s;
        z-index: 9;
        margin: auto;;
    }
    .wx-radio-input.wx-radio-input-checked::before {
        content: ''; 
    }
    &.radio::before {
        display: none;
    }
    &.radio[checked]::after {
        content: '';
        background-color: transparent;
        display: block;
        position: absolute;
        width: 16rpx;
        height: 16rpx;
        z-index: 999;
        top: 0;
        left: 0;
        right: 10rpx;
        bottom: 0;
        margin: auto;
        border-radius: 9999rpx;
        border: 14rpx solid var(--white) !important;
    }
    &[checked] {
        animation: boom .2s ease-in;
        animation-iteration-count: 1;
        .wx-radio-input {
            color: inherit !important;
            background-color: currentColor !important;
            border-color: currentColor !important;
        }
        &::before {
            transform: scale(1, 1);
            font-size: 20rpx;
        }
    }
}
@keyframes boom {
    0% {
        opacity: .2;
        transform: scale(2);
    }
    90% {
        opacity: .01;
        transform: scale(3);
    }
    100% {
        transform: none;
    }
}